<template>
    <div class="city">
        <city-header></city-header>
        <city-content :hotCitys="hotCitys" :citys="citys"></city-content>
    </div>
</template>

<script>
import axios from 'axios';
import CityHeader from './components/Header.vue';
import CityContent from './components/Content.vue';

export default {
    name: 'City',
    components: {
        CityHeader,
        CityContent,
    },
    data(){
        return{
            hotCitys: [],
            citys: {},
        }
    },
    methods: {
        getCityData(){
            axios.get('/api/city.json').then(resolve => {
                this.hotCitys = resolve.data.data.hotcities;  
                this.citys = resolve.data.data.citys;  
            })
        }
    },
    mounted(){
        this.getCityData();
    }
}
</script>

<style>
    .city{
        width: 100%;
        height: 100%;
        display: flex;
    }
</style>